<template>
  <div class="app-container">


    <!-- 查询区域 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="学号">
            <el-input v-model="formInline.sid" placeholder="学号"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="formInline.sname" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item label="课程名">
            <el-select v-model="formInline.cname" placeholder="课程名">
              <el-option label="JaveEE企业级开发" value="JaveEE企业级开发"></el-option>
              <el-option label="JaveEE睿智级开发" value="JaveEE睿智级开发"></el-option>
              <el-option label="JaveEE智熄级开发" value="JaveEE智熄级开发"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
          <!-- 添加 -->
          <el-button type="primary" @click="handleAddRole()">添加</el-button>
        </el-form>




    <!-- 表格区域 -->
    <el-table :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column align="center" label="课程号" width="95">
        <template slot-scope="scope">
          {{ scope.row.cid }}
        </template>
      </el-table-column>

      <el-table-column align="center" width="300" label="课程名">
        <template slot-scope="scope">
          {{ scope.row.cname }}
        </template>
      </el-table-column>
      <el-table-column label="班级" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.clazz }}
        </template>
      </el-table-column>
      <el-table-column label="学号" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.sid }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.sname }}
        </template>
      </el-table-column>
      <el-table-column label="平时成绩" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.usual_score }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="期末成绩" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.final_score }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="总成绩" width="110">
        <template slot-scope="scope">
          {{ scope.row.total_score }}
        </template>
      </el-table-column>

      <el-table-column label="数据操作" width="230" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini"  @click="handleEdit(scope)">
            编辑
          </el-button>
          <el-button type="danger" size="mini"  @click="deleteById(scope.$index,scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页区域-->
    <div class="el-pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[1,2, 3, 4, 5]" :page-size="6" layout="total, sizes, prev, pager, next, jumper" :total="5">
      </el-pagination>
    </div>

<el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑':'添加'">
  <el-form :model="student" label-width="80px" label-position="left">
      <el-form-item label="课程号">
          <el-input v-model="score.cid" placeholder="课程号" />
        </el-form-item>
        <el-form-item label="课程名">
          <el-input v-model="score.cname" placeholder="课程名" />
        </el-form-item>
        <el-form-item label="班级">
          <el-input v-model="score.clazz" placeholder="班级" />
        </el-form-item>
        <el-form-item label="学号">
          <el-input v-model="score.sid" placeholder="学号" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="score.sname" placeholder="姓名" />
        </el-form-item>
        <el-form-item label="平时成绩">
          <el-input v-model="score.usual_score" placeholder="平时成绩" />
        </el-form-item>
        <el-form-item label="期末成绩">
          <el-input v-model="score.final_score" placeholder="期末成绩" />
        </el-form-item>
        <el-form-item label="总成绩">
          <el-input v-model="score.total_score" placeholder="总成绩" />
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
      <el-button type="danger" @click="dialogVisible=false">取消</el-button>
      <el-button type="primary" @click="confirmSrudent">确定</el-button>
    </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getList
  } from '@/api/score/tableS.js'
import{
    delTableRow
  }from '../../../../api/score/tableS.js'

 const defaultRole = {
    cid: '',
    cname: '',
    clazz: '',
    sid: '',
    sname: '',
    usual_score: '',
    final_score: '',
    total_score: ''
  }

  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        formInline: {
                  sid: '',
                  sname: '',
                  cname: ''
        },
        score: Object.assign({}, defaultRole),
        dialogVisible: false,
        list: null,
      }
    },
    created() {
      this.fetchData()
    },
   /* methods: {
      editscore(cid) {
        this.$router.push("/editscore/index/" + cid)
      },*/
      methods: {
          // 查询
         onSubmit() {
                console.log('submit!');
         },

          // 添加
         handleAddRole() {
           this.student = Object.assign({}, defaultRole)
           this.dialogType = 'new'
           this.dialogVisible = true
         },
         deleteById(idx, row) {
           alert("删除成功");
           console.log("索引", idx);
           console.log("第",row,"行数据");
           console.log(row.id)
           delTableRow(row.id).then((res) =>{
             console.log(res)
           })
         
         },

         // 编辑区域
         handleEdit(scope) {
           this.dialogType = 'edit'
           this.dialogVisible = true
           this.score = deepClone(scope.row)
         },

        async confirmSrudent() {
          this.dialogVisible = false
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
        },
      fetchData() {
        var vm = this;
        getList().then(res => {
          console.log(res.content);
          vm.list = res.content;
        })
      }
    },
  }
</script>
